<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="搜索"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
    </header>
    <section>
      <van-search
        v-model="value"
        show-action
        label="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="ser">搜索</div>
        </template>
      </van-search>
    </section>
    <main class="content">
      <div class="list">
        <!-- 历史搜索 -->
        <span class="clr"
          >历史搜索
          <van-icon class="del" name="delete-o" @click="remove"/>
        </span>
        <ul class="goods">
          <li class="show1" v-for="(item, index) in list" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 搜索发现 -->
      <div class="list">
        <span class="clr">搜索发现</span>
        <div class="li">
          <ul class="goods">
            <li
              class="show1"
              v-for="(item,index) in goods"
              :key="index"
              @click="leap(index)"
            >
              {{ item.keyword }}
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: "",
      text: "",
      goods: [
        { keyword: "麻辣烫" },
        { keyword: "米线" },
        { keyword: "披萨" },
        { keyword: "蛋糕" },
        { keyword: "汉堡" },
        { keyword: "腊八粥" },
        { keyword: "烤肉拌饭" },
        { keyword: "炸鸡" },
        { keyword: "味多美（温阳路店)" },
      ],
      list: [],
      searchkey: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      this.list.push(this.value)
      console.log(this.list);
        this.$router.push({path:"/Ser/SearchShop",query:{
        zi:this.value
      }});
      this.value = ''
    },
    leap(index) {
      this.value = this.goods[index].keyword
    
    },
    remove() {
      localStorage.removeItem("keyword");
      this.list=[]
    },
  },
};
</script>

<style lang="css" scoped>
.clr {
  position: relative;
  display: block;
}
.van-icon {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}
.content {
  flex: 1;
  overflow: auto;
  margin: 0 20px;
}
span {
  position: relative;
}
.del {
  position: absolute;
  top: -1.2167rem;
  left: 4.6667rem;
}
.show1 {
  height: 20px;
  border: 1px solid gray;
  color: gray;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  margin: 7px;
  padding: 0 5px;
  background-color: #efefef;
}

.goods {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
}
header {
  min-height: 3.5rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
.ser {
  color: rgb(11, 96, 223);
}
</style>